<template>
  <FormSection title="教育经历">
    <FormItem
      v-for="(edu, index) in resumeData.education"
      :key="index"
      @remove="removeEducation(index)"
    >
      <FormGrid>
        <FormField
          label="学校名称"
          type="text"
          placeholder="请输入学校名称"
          v-model="edu.school"
        />
        <FormField
          label="专业"
          type="text"
          placeholder="请输入专业"
          v-model="edu.major"
        />
        <FormField
          label="学历"
          type="select"
          placeholder="请选择学历"
          v-model="edu.degree"
          :options="degreeOptions"
        />
        <FormField
          label="入学时间"
          type="date"
          v-model="edu.startDate"
        />
        <FormField
          label="毕业时间"
          type="date"
          v-model="edu.endDate"
        />
      </FormGrid>
    </FormItem>
    <AddButton text="添加教育经历" @click="$emit('add-education')" />
  </FormSection>
</template>

<script setup lang="ts">
import FormSection from './FormSection.vue'
import FormGrid from './FormGrid.vue'
import FormField from './FormField.vue'
import FormItem from './FormItem.vue'
import AddButton from './AddButton.vue'

interface Education {
  school: string
  major: string
  degree: string
  startDate: string
  endDate: string
}

interface ResumeData {
  education: Education[]
}

interface Props {
  resumeData: ResumeData
}

defineProps<Props>()

const degreeOptions = [
  { value: '专科', label: '专科' },
  { value: '本科', label: '本科' },
  { value: '硕士', label: '硕士' },
  { value: '博士', label: '博士' }
]

const emit = defineEmits<{
  'add-education': []
  'remove-education': [index: number]
}>()

const removeEducation = (index: number) => {
  emit('remove-education', index)
}
</script>
